import styles from '/index.module.css'
import React, { useState,useCallback } from 'react'
// const User = () => {
//   return(
//     <div>User</div>
//   )
// }
const Child = React.memo(({ onClick }) => {
  console.log('Child rendered!'); // 观察子组件是否重新渲染
  return <button onClick={onClick}>Click Child</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  
  // 情况1：不使用 useCallback
  const badFn = () => console.log(count);
  
  // 情况2：使用 useCallback
  const goodFn = useCallback(() => console.log(count), [count]);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment ({count})</button>
      
      {/* 每次 count 变化时，Child 都会重新渲染 */}
      <Child onClick={badFn} />
      
      {/* count 变化时 Child 不会重新渲染（函数引用不变） */}
      <Child onClick={goodFn} />
    </div>
  );
}
export default Parent;
